<template>
  <div class="swiper">
    <swiper
      indicator-dots="true"
      indicator-color="rgba(255,255,255,.3)"
      indicator-active-color="#EA5A49"
      autoplay="true"
      circular="true"
    >
      <swiper-item v-for="(top, imgIndex) in imgUrl" :key="imgIndex">
        <img @click="bookDetail(img)" class="slide-image" :src="img.image" mode="aspectFill" v-for="img in top" :key="img.id">
      </swiper-item>
    </swiper>
  </div>  
</template>
<script>
export default {
  props: ['tops'],
  computed: {
    imgUrl () {
      let res = this.tops
      return [res.slice(0, 3), res.slice(3, 6)]
    }
  },
  mounted () {
    console.log(this.tops)
    console.log(this.imgUrl)
  },
  methods: {
    bookDetail (item) {
      console.log(item.id)
      wx.navigateTo({
        url: '/pages/detail/main?id=' + item.id
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.swiper {
  margin-top: 5px;
  swiper-item {
    padding: 20rpx;
    display: flex;
    box-sizing:border-box;
    justify-content: space-between;
    .slide-image {
      width: 30%;
      height: 250rpx;
    }
  }
}
</style>


